import React,{ Component } from 'react'
import PubSubJS from 'pubsub-js'
import { TabBar } from 'antd-mobile'

import cookbook from "assets/cookbook.png"
import cookbookActive from "assets/cookbook-active.png"
import location from "assets/location.png"
import locationActive from "assets/location-active.png"
import menu from "assets/menu.png"
import menuActive from "assets/menu-active.png"
import more from "assets/more.png"
import moreActive from "assets/more-active.png"

import { Cookbook, Category, Foodmap, More } from "../index"

export default class Tab extends Component {
  constructor(props) {
    super(props);
    this.state = {
      hidden: false,
      fullScreen: true,
      mapTabBarShow: true,
      itemDataList: [
        { id: "01", title: "美食大全", url: cookbook, acturl: cookbookActive, component: <Cookbook></Cookbook>, selectedTab: true},
        { id: "02", title: "分类", url: menu, acturl: menuActive, component: <Category></Category>,  selectedTab: false},
        { id: "03", title: "美食地图", url: location, acturl: locationActive, component: <Foodmap></Foodmap>,  selectedTab: false},
        { id: "04", title: "更多", url: more, acturl: moreActive, component: <More></More>,  selectedTab: false}
      ]
    };
  }

  componentDidMount() {
    this.token = PubSubJS.subscribe("mapShowChecked", (_, data) => {
      this.setState({mapTabBarShow: data})
    })
  }

  componentWillUnmount() {
    PubSubJS.unsubscribe(this.token)
  }

  onPress = (value) => {
    value.selectedTab = true
    let [a, b, c, d] = this.state.itemDataList
    return (e) => {
      let newItemDataList = []
      if (value.id === "01") {
        newItemDataList = [value, b, c, d]
      } else if (value.id === "02") {
        newItemDataList = [a, value, c, d]
      } else if (value.id === "03") {
        newItemDataList = [a, b, value, d]
      } else{
        newItemDataList = [a, b, c, value]
      }
      console.log(e);
      console.log(newItemDataList);
      return this.setState({itemDataList: newItemDataList})
    }
  }

  renderContent(pageText) {
    return (
      <div style={{ backgroundColor: 'white', height: '100%', textAlign: 'center' }}>
        <div style={{ paddingTop: 60 }}>Clicked “{pageText}” tab， show “{pageText}” information</div>
        <a style={{ display: 'block', marginTop: 40, marginBottom: 20, color: '#108ee9' }}
          onClick={(e) => {
            e.preventDefault();
            this.setState({
              hidden: !this.state.hidden,
            });
          }}
        >
        </a>
        <a style={{ display: 'block', marginBottom: 600, color: '#108ee9' }}
          onClick={(e) => {
            e.preventDefault();
            this.setState({
              fullScreen: !this.state.fullScreen,
            });
          }}
        >
        </a>
      </div>
    );
  }

  render() {
    return (
      <div style={this.state.fullScreen ? { position: 'fixed', height: '100%', width: '100%', top: 0 } : { height: 400 }}>
        <TabBar
          unselectedTintColor="#666"
          tintColor="#000"
          barTintColor="white"
          hidden={this.state.hidden}
        >
          {
            this.state.itemDataList.map(value => (
              <TabBar.Item
              title={value.title}
              key={value.id}
              icon={<div style={{
                width: '22px',
                height: '22px',
                background: `url(${value.url}) center center /  21px 21px no-repeat` }}
              />
              }
              selectedIcon={<div style={{
                width: '22px',
                height: '22px',
                background: `url(${value.acturl}) center center /  21px 21px no-repeat` } }
              />
              }
              selected={value.selectedTab}
              onPress={ this.onPress(value) }
            >
            {
              value.component
            }
            </TabBar.Item>
            ))
          }
        </TabBar>
      </div>
    );
  }
}